<template>
	<view>
		<view class="topnav">
			<van-nav-bar
			  title="确认订单"
			  left-arrow
			  @click-left="onClickLeft"
			/>
		</view>
		<view class="box">
			<!-- 地址区域 -->
			<view class="addres">
				<view class="left">
					<view class="tex1">
						<text class="name">{{order.aname}}</text>
						<text class="tel">{{order.tel}}</text>
					</view>
					<view class="tex2">
						<text>{{order.addres}}</text> 
					</view>
				</view>
				<view class="right">
					<van-icon name="edit" />
				</view>
			</view>
			
			<!-- 商品区域 -->
			<view class="shop">
				<view class="item">
					<image :src="order.simg" mode=""></image>
					<view class="text-info">
						<text class="tex1">{{order.sname}}</text>
						<text class="tex2">{{order.size}}</text>
						<text class="tex3">¥{{order.sprice}} X {{order.num}}</text>
					</view>
				</view>
				<view class="ms">
					<text>商品总价: ¥{{ order.sprice * order.num }}</text>
				</view>
			</view>
			
			<view class="desc">
				<text class="title">买家描述</text>
				<view class="bz">
					<text>买家应在签收时仔细查验商品,如果发现质量问题应给于拒收,拒收商品应保持鉴别证书,防伪和完好并连同原箱拒收,如买家签收后发现质量问题,应在收货后7日内联系客服.提交订单即表示同意买家须知</text>
				</view>
				<text class="ent">提交订单即表示同意 买家须知</text>
			</view>
		</view>
		
		<view class="submit">
			<view class="sum">
				<text class="msg">一共1件,合计: </text>
				<text class="price">¥{{order.sprice * order.sum}}</text>
			</view>
			<van-button round type="info" color="#085710" @click="submitOrders">提交订单</van-button>
		</view>
	</view>
</template>

<script>
	// 加载组件导入
	import { Toast } from 'vant';
	import {UpOrder} from '../../request/api.js'
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				order:''
			}
		},
		methods: {
			onClickLeft(){
				
			},
			// 订单提交事件
			submitOrders(){
				// console.log(23232);
				const toast = Toast.loading({
				  duration: 0, // 持续展示 toast
				  forbidClick: true,
				  message: '正在支付中...',
				});
				
				let second = 2;
				const timer = setInterval(() => {
				  second--;
				  if (second) {
				    toast.message = `正在支付中${second} 秒`;
				  } else {
					this.$notify({type:'success',message:'购买成功!'})
				    clearInterval(timer);
				    // 手动清除 Toast
				    Toast.clear();
					
					//跳转到对应的页面
					uni.switchTab({
						url:'/pages/index/index'
					})
				  }
				}, 1000);
				UpOrder(this.order.oid,(res)=>{
					console.log('cg');
				})
				// 修改订单状态
				// this.order.orderstate = 2
				// let date = new Date().getTime()
				// this.order.oid = date
				// let orderInfo = []
				// orderInfo.push(this.order)
				// console.log(orderInfo);
				// orderInfo.push({...this.order})
				// //存储到本地中
				// uni.setStorage({
				// 	key: 'orderInfo',
				// 	data: orderInfo
				// });
				// let data = {
				// 	data:{...this.order},
				// 	type:'add'
				// }
				// store.commit('setOrder',data)
				
				
			}
		},
		onLoad(){
			this.order = store.state.loadOrder
			console.log(this.order);
		}
	}
</script>

<style lang="less">
page{
	background-color: #f3f3f3;
}
.box{
	width: 100%;
	height: 1000rpx;
	background-color: #f3f3f3;
	box-sizing: border-box;
	padding: 35rpx 25rpx;
}
.addres{
		margin-bottom: 15rpx;
		width: 100%;
		height: 160rpx;
		background-color: white;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 0px 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.tel{
			font-size: 26rpx;
			color: #cccccc;
			margin: 0px 8px;
		}
		.mr{
			display: inline-block;
			width: 80rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			color: #085710;
			border: 1px solid #085710;
		}
		.tex2{
			margin-top: 10rpx;
			width: 440rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text{
				margin-right: 10rpx;
			}
		}
		.left{
			width: 500rpx;
		}
	}
	.shop{
		width: 100%;
		height: 280rpx;
		background-color: white;
		margin: 20rpx 0;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #cccccc;
		image{
			width: 145rpx;
			height: 145rpx;
			
		}
		.text-info{
			width: 67%;
			display: flex;
			flex-direction: column;
			.tex1{
				font-size: 0.9rem;
			}
			.tex2{
				font-size: 0.7;
				color: #cccccc;
				margin: 8rpx 0;
			}
			.tex3{
				color: #085710;
				margin-bottom: 10rpx;
			}
		}
	}
	.ms{
		margin-top: 10rpx;
	}

.desc{
	width: 100%;
	height: 300rpx;
	background-color: white;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 30rpx;
	.title,.ent{
		font-size: 0.8rem;
	}
		
	.bz{
		width: 100%;
		height: 150rpx;
		text{
			font-size: 0.7rem;
			color: #cccccc;
		}
	}
}
.submit{
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: white;
	box-sizing: border-box;
	padding: 0 40rpx;
	.sum{
		width: 400rpx;
		.price{
			color: #085710;
		}
		.msg{
			font-size: 0.9rem;
		}
	}
}
</style>
